<template>
  <div class="machine-status-switch">
    <el-form ref="ruleForm" :inline="true" :model="searchForm" :rules="rules" label-width="120px">
      <el-form-item :label="$t('eqpName')" style="width: '48%'" prop="eqpId">
        <el-input v-model="searchForm.eqpId" @change="getInfo"/>
      </el-form-item>
      <el-form-item :label="$t('eqpState')" style="width: '48%'">
        <el-input v-model="searchForm.eqpStatus" disabled/>
      </el-form-item>
      <el-form-item :label="$t('status')" style="width: '48%'" prop="eqpSwitchStatus">
        <el-select v-model="searchForm.eqpSwitchStatus" @change="getReasonCodeList">
          <el-option
            v-for="item in eqpStatus"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('reasonCode')" style="width: '48%'" prop="reasonCode">
        <el-select v-model="searchForm.reasonCode">
          <el-option
            v-for="item in reasonCodeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('operator')" style="width: '48%'">
        <el-input v-model="searchForm.operId" disabled/>
      </el-form-item>
      <el-form-item :label="$t('remark')" style="width: '100%'">
        <el-input
          v-model="searchForm.remark"
          type="textarea"
          maxlength="200"
          show-word-limit/>
      </el-form-item>
    </el-form>
    <div class="btn-opt">
      <el-button
        :loading="loading"
        type="primary"
        @click="doSave"
      >确认</el-button>
    </div>
  </div>
</template>

<script>
import { getOEEReason, GetOEEInfo, OEEStatusSwitchOk } from '@/api/production/machine-status-switch'
export default {
  name: 'MachineStatusSwitch',
  data() {
    return {
      searchForm: {
        eqpId: '',
        reasonCode: ''
      },
      eqpStatus: [],
      reasonCodeList: [],
      loading: false,
      rules: {
        eqpId: [{ required: true, message: `${this.$t('pleaseInput')}${this.$t('eqpName')}`, trigger: 'blur' }],
        eqpSwitchStatus: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('status')}`, trigger: 'change' }],
        reasonCode: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('reasonCode')}`, trigger: 'change' }]
      }
    }
  },
  methods: {
    doSave() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          OEEStatusSwitchOk(this.$clearNull(this.searchForm)).then(res => {
            this.$betterTips(res)
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    getInfo(value) {
      GetOEEInfo({ eqpId: value }).then(res => {
        if (res.code === 1) {
          const { statusList, ...obj } = res.data
          this.searchForm = Object.assign({}, this.searchForm, obj)
          this.eqpStatus = statusList
        } else {
          this.$betterTips(res)
        }
      })
    },
    getReasonCodeList(value) {
      this.searchForm.reasonCode = ''
      getOEEReason({ statusCode: value }).then(res => {
        if (res.code === 1) {
          this.reasonCodeList = res.data
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.machine-status-switch{
    width: 80%;
    background-color: #fff;
    margin: 0 auto;
    padding-top: 20px;
}
.btn-opt{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 20px;
}
::v-deep .el-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  .el-form-item {
    width: 48%;
    .el-form-item__content{
      width: 60%;
      .el-select {
        width: 100%;
      }
      .el-date-editor {
        width: 100%;
      }
    }
  }
}
</style>
